<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/mainmenu.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/style.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/slider_style.css" rel="stylesheet" type="text/css" />
        <title>
            <ui:insert name="title">
                Online SuperMarket
            </ui:insert>
        </title>
        <link rel="shortcut icon" href="./resources/image/main_icon.png"/>
        <script type="text/javascript" src="./resources/js/menu.js" data-tgdelst="live"></script>
    </h:head>
    <h:body>
        <div id="top">
            <div class="fullheader_menu_bar">
                <div class="header_menu_bar">
                    <div class="menu-top-bar-container">
                        <ul id="menu-top-bar" class="menu">
                            <li id="menu-item-380" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-380">
                                <a href="#">Contact</a>
                            </li>
                            <li id="menu-item-381" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-381">
                                <a href="about.jsf">About Us</a>
                            </li>
                        </ul></div>
                </div><!-- header_menu_bar -->
            </div><!-- end fullheader_menu_bar -->
            <div class="wrap_lay3">
                <div class="clipart">
                    <div class="lay_base header_shine"></div>
                </div><!-- clipart--> 
                <div class="wrapper_header">
                    <div class="lay_base header_pattern"></div>
                    <div class="lay_base header_shadow"></div>
                    <!-- end layout header layers -->
                    <div id="header">
                        <div class="container_LogoSearch">
                            <a href="index.jsf" class="logo" >
                                <img src="./resources/image/main_logo.png"/>
                                <span class="logotext"><i>Online SuperMarket</i><p>eProject SEM4 - group 2</p></span>
                            </a>
                            <ui:insert name="searchBox">
                                <div class="search_area show_element">
                                    <h:form class="form-inline">
                                        <input type="text" value="#{masterBean.searchKey}" placeholder="Search .."/>
                                        <h:commandButton action="search.jsf">
                                            <f:param name="searchKey" value="#{masterBean.searchKey}"/>
                                        </h:commandButton>
                                    </h:form>
                                </div>
                            </ui:insert>
                            <ul class="icon_socials show_element">
                                <li class="ic_facebook"><a rel="" href="https://www.facebook.com/groups/itmigroup/" title="Visit us on Facebook" target="_blank"></a></li>
                                <li class="ic_plus"><a rel="" href="#" title="Visit us on Google+"></a></li>
                                <li class="ic_mail"><a rel="" href="mailto:?&amp;subject=Customer&amp;to=online-supermarket@googlegroups.com" title="Email us" target="_blank"></a></li>
                            </ul>        
                        </div><!-- end container_LogoSearch -->
                        <div class="container_menu show_element">
                            <div class="menu-wtg-container">
                                <ul id="menu-wtg" class="menu">
                                    <li><a href="index.jsf">Home</a></li>
                                    <li><a href="#">Big sale!</a></li>
                                    <li><a href="search.jsf">Search</a></li>
                                    <li><a href="#">Category</a>
                                        <ul class="sub-menu">
                                            <!--load category menu here-->
                                            <li><a href="#">Portfolio</a></li>
                                            <li><a href="#">Products</a>
                                                <ul class="sub-menu">
                                                    <li><a href="#">Portfolio</a></li>
                                                    <li><a href="#">Products</a></li>
                                                    <li><a href="#">Services</a></li>
                                                    <li><a href="#">Testimonials</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">Services</a></li>
                                            <li><a href="#">Testimonials</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Contact</a></li>
                                </ul></div><!-- end container menu--></div>
                    </div><!-- end header -->
                    <div class="bar_separate header_separate"></div>
                </div><!-- wrapper_header -->
                <!--end layout header -->
                <ui:insert name="slider"></ui:insert>
            </div><!-- end wrap_lay3 -->
            <div class="bar_separate content_separate"></div>
        </div>

        <div class="wrapper_content">
            <div class="lay_base content_pattern"></div>
            <div id="footer">
                <ui:insert name="content">
                </ui:insert>
            </div>
            <div class="bar_separate footer_separate"></div>
            <div class="lay_base content_shadow"></div>
        </div>
        <div class="wrapper_footer">
            <div class="lay_base footer_pattern"></div>
            <div class="lay_base footer_shadow"></div>
            <div id="footer">
                <div id="header">
                    <a href="index.jsf" class="logo" style="float:left">
                        <img src="./resources/image/main_logo.png"/>
                        <span class="logotext"><i>eProject SEM4 - group 2</i>
                            <p style="margin-top: 0px">Student598083 VU QUANG NGUYEN - LEADER<br/>
                                Student606593 HUNG KHANH HOANG<br/>
                                Student591881 HOANG CONG NGOC PHAM<br/>
                                Student603731 ANH HUNG TRINH</p>
                        </span>
                    </a>
                    <style>
                        .external_framework a img{
                            width: 200px;
                            height: 55px;
                            margin: 3px;
                        }
                    </style>
                    <div class="external_framework" style="float: left">
                        <div style="background-color: white; height:140px; width: 1px; float: left; margin-right: 15px"></div>
                        <table>
                            <tr>
                                <td><a href="http://www.hibernate.org/" target="_blank"><img src="http://biiteducation.com/images/hibernatelogo.png"/></a></td>
                                <td><a href="http://primefaces.org/" target="_blank"><img src="http://www.bradchen.com/images/primefaces-logo.png"/></a></td>
                            </tr>
                            <tr>
                                <td><a href="http://javaserverfaces.java.net/" target="_blank"><img src="http://muhammetarslan.com.tr/wp-content/uploads/2013/01/jsf-logo-620x180.png"/></a></td>
                                <td><a href="http://tomcat.apache.org/" target="_blank"><img src="http://www.cloudguide.com.cn/elinstudio/upload/79_120126000217_1.png"/></a></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="fixed">
            <div class="blog_boxes boxcss_default">
                <div class="container_posts_pieces_fixed">
                    <div class="post_corner post_top_left"><div class="post_token_left"></div></div>
                    <div class="post_topbottom post_top_center"></div>
                    <div class="post_corner post_top_right"><div class="post_token_right"></div></div>
                    <div class="post_sides post_middle_left"></div>
                    <div class="post_center post_content" style="background-color: white">
                        <h:form id="profile_form" class="content_form" style="display: none">
                            <h:graphicImage class="avatar" url="./resources/image/ic_avatar.png"/>
                            <div class="div">
                                <h:outputLink target="_blank" title="View Profile" value="index.jsf">Nguyễn Vũ</h:outputLink><br/>
                                <h:outputLink target="_blank" title="Change Phone Number" value="index.jsf">01659528284</h:outputLink><br/>
                                <div class="alam" style="background-color: #009900" />
                                <h:outputLink class="alam_message" value="index.jsf">card available</h:outputLink><br/>
                            </div>
                        </h:form>
                        <h:form id="login_form" class="content_form">
                            <img class="loginIcon" src="./resources/image/ic_username.png"/>
                            <input id="txtUsername" class="loginText" type="text" placeholder="Username"/>
                            <img class="loginIcon" src="./resources/image/ic_pass.png"/>
                            <input id="txtPassword" class="loginText" type="password" placeholder="Password"/>
                            <h:commandButton class="loginBtn" value="Login" />
                        </h:form>
                        <div class="separator"></div>
                        <h:form id="register_form" class="content_form">
                            <p>not a member yet?<br/>
                                <b>to purchase faster</b><br/>
                                take a
                            </p>
                            <h:commandButton id="registerBtn" class="registerBtn" value="Register"/>
                            <p>NOW!</p>
                        </h:form>
                    </div>  
                    <div class="post_sides post_middle_right"></div>
                    <div class="post_corner post_bottom_left"></div>
                    <div class="post_topbottom post_bottom_center"></div>
                    <div class="post_corner post_bottom_right"></div>
                </div><!-- end container_posts_pieces -->
                <div class="post_token_bottom"></div>
            </div>
        </div>
    </h:body>
    <h:form style="display:none"><p:commandButton/></h:form>
</html>
